<template>
    <div>
        <ul>
            <li v-for="m in message" :key="m.id">
                <!-- 路由params传参的第一种方式：模板字符串写法，需要注意to前需要加引号，以及模板字符串需要写在双引号中 -->
                <!-- ！注意！params传参时，必须通过name来跳转，而不是path -->
                <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">消息{{m.id}}</router-link>&nbsp;&nbsp; -->

                <!-- 路由params传参的第二种方式：对象写法 -->
                <router-link
                 :to="{
                    path:'/home/message/detail',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                    消息{{m.id}}
                </router-link>
                &nbsp;&nbsp;
            </li>
        </ul>
        <br>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name:'Message',
    data(){
        return {
            message:[
                {id:"001",title:'消息1标题'},
                {id:"002",title:'消息2标题'},
                {id:"003",title:'消息3标题'},
            ]
        }
    }
}
</script>

<style>

</style>